import React from 'react';
import { connect } from 'umi';
import { Button, Popconfirm } from 'antd';

import ProTable from '@ant-design/pro-table';

const Table = ({ smManageRule, openModifyModal, dispatch, roleSelectData, mainSelectData }) => {
  const { tableRef } = smManageRule;
  const provideData = {};
  roleSelectData.forEach(item => {
    provideData[item.id] = { text: item.name };
  });
  const roleData = {};

  mainSelectData.forEach(item => {
    roleData[item.id] = { text: item.name };
  });
  const columns = [
    {
      title: '序号',
      dataIndex: 'index',
      valueType: 'index',
      fixed: 'left',
      width: 100,
    },
    {
      title: '用户编号',
      dataIndex: 'id',
      align: 'center',
      width: 160,
      hideInSearch: true,
    },
    {
      title: '用户名',
      dataIndex: 'username',
      align: 'center',
      width: 160,
      hideInSearch: true,
    },
    {
      title: '用户名',
      dataIndex: 'username',
      align: 'center',
      width: 160,
      hideInTable: true,
    },
    {
      title: '昵称',
      dataIndex: 'nickname',
      align: 'center',
      width: 160,
      hideInSearch: true,
    },
    {
      title: '用户角色',
      dataIndex: 'roleGroup',
      align: 'center',
      width: 120,
      valueEnum: provideData,
    },
    {
      title: '手机号码',
      dataIndex: 'phone',
      align: 'center',
      width: 120,
    },
    {
      title: '邮箱',
      dataIndex: 'mail',
      valueType: 'mail',
      align: 'center',
      width: 120,
    },
    {
      title: '认证主体类型',
      dataIndex: 'role',
      align: 'center',
      width: 140,
      hideInSearch: true,
    },
    {
      title: '认证主体',
      dataIndex: 'role',
      align: 'center',
      width: 140,
      hideInTable: true,
      valueEnum: roleData,
    },
    {
      title: '账号生成时间',
      dataIndex: 'createTime',
      align: 'center',
      width: 260,
      hideInSearch: true,
    },
    {
      title: '操作',
      valueType: 'option',
      align: 'center',
      dataIndex: 'id',
      width: 240,
      fixed: 'right',
      render: (dom, data) => [
        <a key={`${data.id}up`} onClick={() => openModifyModal(data)}>
          编辑
        </a>,
        <Popconfirm
          key={`${data.id}del`}
          title="确认删除该角色吗？该操作不可恢复"
          placement="topRight"
          onConfirm={() => deleteManage([data.id])}
        >
          <a>删除</a>
        </Popconfirm>,
      ],
    },
  ];

  const getManageList = params =>
    new Promise(resolve => {
      dispatch({
        type: 'smManageRule/getManageList',
        payload: { ...params },
        resolve,
      });
    });
  const deleteManage = id => {
    dispatch({
      type: 'smManageRule/deleteManage',
      payload: id,
    });
  };

  return (
    <ProTable
      rowKey="id"
      headerTitle="信息列表"
      actionRef={tableRef}
      rowSelection={[]}
      request={async params => getManageList(params)}
      toolBarRender={(_, { selectedRowKeys }) => [
        <Button type="primary" onClick={() => openModifyModal()}>
          创建新账号
        </Button>,
        selectedRowKeys && selectedRowKeys.length && (
          <Button
            onClick={() => {
              Modal.confirm({
                title: '确认删除改系统账号吗？该操作不可恢复',
                onOk: () => {
                  deleteManage(selectedRowKeys);
                },
              });
            }}
          >
            批量删除
          </Button>
        ),
      ]}
      columns={columns}
    />
  );
};

export default connect(({ smManageRule }) => ({
  smManageRule,
  roleSelectData: smManageRule.roleSelectData,
  mainSelectData: smManageRule.mainSelectData,
}))(Table);
